<template>
  <div id="order">
 <div class="bt">&nbsp;/&nbsp;所有&nbsp;› &nbsp;个人中心</div>
      <div class="user_area">
        <div class="navigation">
          <ul>
            <li><router-link to="./index" >基本信息</router-link></li>
            <li><router-link to="./notice" >我的消息</router-link></li>
            <li><router-link to="./address" >收货地址</router-link></li>
            <li class="select"><router-link to="./myorder" >我的订单</router-link></li>
            <li><router-link to="./shop_car" >购物车</router-link></li>
          </ul> 
        </div>
        <div class="main">

          <table  class="table2" cellspacing="0" cellpadding="0" v-if="!detail">
              <tr>
                <th width="800px" colspan="7">我的订单</th>
              </tr>
              <tr class="tr">
                 <td>收货人</td>
                <td>收货地址</td>
                <td>总价</td>
                <td>订单状态</td>
                <td>操作</td>
              </tr>
              <tr v-for="(item,index) in orderdata" v-if="orderdata[0]">
                  <td>{{ item.buy_person }}</td>
                  <td>{{ item.address }}</td>
                  <td>￥{{ item.total_price | currency }}</td>
                  <td>{{ item.pay }}</td>
                  <td><a href="javascript:;" class="detail" @click="show_detail(item.id)">查看详情</a>&nbsp;&nbsp;<a href="javascript:;" class="confirm" v-if="item.pay == '已发货'" style="color:#cc0000" @click="confirm(item.id)">确认收货</a><a href="javascript:;" v-if="item.pay == '未支付'" @click="go_buy(item.order_name)" style="color:#cc0000">去支付</a></td>
              </tr>
              <tr>
                    <td colspan="5">
                          <my-page :pageinfo="pageinfo" @info="pagechange"></my-page>
                    </td>
              </tr>
          </table> 
          <table  class="table2" cellspacing="0" cellpadding="0" v-if="detail">
              <tr>
                <th width="800px" colspan="7">订单详情</th>
              </tr>
              <tr class="tr">
                <td>商品图片</td>
                <td>商品名称</td>
                <td>价格</td>
                <td>简介</td>
                <td>操作</td>
              </tr>
              <tr v-for="(item,index) in foods">
                  <td><img :src="item.img_url" alt="" width="60px" height="60px" style="margin-top:5px;border-radius: 50%"></td>
                  <td>{{ item.title }}</td>
                  <td>￥{{ item.price_old | currency }}</td>
                  <td>{{ item.summary}}</td>
                  <td><router-link v-if="item.pay == '待评价'" :to="{ name: 'evaluate', params: { fid:item.id }}">去评价</router-link><router-link :to="{ name: 'fooddetail', params: { fid:item.id }}" v-if="item.pay != '待评价'">查看商品详情</router-link></td>
              </tr>
          </table>    
        </div>
      </div>
  </div>
   </div>
</template>

<script>
import page from '../Public/page';
export default {
  data () { 
    return {
        orderdata:[],
        pageinfo:{
          current:1,
          showItem:10,
          shownum:1
        },
        detail:false,
        foods:''
    }
  },
  created: function () {
    this.get_order_data();
  },
  components: {
    'myPage':page
  },
   filters: {
      currency: function (value) {
        return parseInt(value).toFixed(2);
      }
    },
  watch:{
  },
  methods: {
    // 获取订单数据
    get_order_data(){
      var username=this.$cookie.get('username');
      this.$http({
          method:'GET',
              url:'http://123.56.86.203/order/index?username='+username+'&current='+this.pageinfo.current+'&showItem='+this.pageinfo.showItem,
      }).then(function(info){
          var data=info.data;
          if(data.status == 0){
              this.orderdata=data.info;
              this.pageinfo.shownum=data.allcount;
          }
      },function(error){
            console.log(error);
      })
    },
    go_buy(index){
      //设置订单编号
      this.$cookie.set('ordername',index); 
      this.$router.push({ name: 'pay', params: { flow:2}});
    },
    pagechange(data){
      this.pageinfo.current=data.current;
      this.get_order_data();
    },
    confirm(id){
        var status = 4;
      this.$http({
          method:'GET',
              url:'http://123.56.86.203/order/status_change?id='+id+'&status='+status,
      }).then(function(info){
          console.log(info);
      },function(error){
            console.log(error);
      })    
    },
    show_detail(id){
      this.detail=true;
      this.$http({
          method:'GET',
          url:'http://123.56.86.203/order/order_goods?id='+id,
      }).then(function(info){
          var data=info.data;
          if(data.status == 0){
            for(var i = 0;i<data.info.length;i++){
              if(data.info[i].summary.length > 8 ){ 
                data.info[i].summary=data.info[i].summary.substring(0,8)+'...';
              }
            }
            this.foods=data.info;
            console.log(this.foods);
          }
      },function(error){
            console.log(error);
      }) 
    }
  }
}
</script>

<style scoped>
#order{
  width:1000px;
  margin:0 auto;
}
.bt{
   width: 100%;
  height: 25px;
  font:13px/25px '微软雅黑';
}
.user_area{
  width: 100%;
  margin:10px;
}
.user_area .navigation{
  padding-top: 15px;
  padding-bottom: 15px;
  width: 12%;
  background-color: rgba(255,255,255,0.6);
  float: left;

}
.user_area .navigation ul{
  width: 100%;
}
.user_area .navigation ul li a{
  width: 85%;
  font:15px/30px '微软雅黑';
  color:#666;
  padding-left: 15%;
}
.user_area .navigation ul .select a{
  color:#FF4400;
  background-color: rgba(255,255,255,0.5);
}
.user_area .main{
  float: left;
  width: 75.5%;
  margin-left: 3%;
  background-color: rgba(255,255,255,0.6);
  padding: 30px 4%;
}
.router-link-active{
  background-color: rgba(255,255,255,0.5);
}

.user_area .main table{
  width: 100%;
  text-align: center;
}
.table2 tr th{
  font:22px/35px '微软雅黑';
  height: 50px;
  border-bottom: 1px solid #ccc;
}
.table2 tr td{
  height: 45px;
  font:bold 14px/22px '微软雅黑';
  color:#666;
  border: 1px solid #E2E2E2;

}
.table2 .tr td{
  font:bold 15px/28px '微软雅黑';
  color:#000;
  height: 50px;
  background-color: #F2F2F2;
}
.table2 tr td a{
   font:bold 14px/22px '微软雅黑';
  color:#666;
 
}
.table2 tr td span{
    font:bold 14px/22px '微软雅黑';
  color:#666; 
}

.table2 tr td  .minus{
  float: left;
  margin-left: 15px;
}
.table2 tr td  .num_area{
  width: 38%;
  float: left;
  height: 28px;
  background-color:#fff;
  border: 1px solid #ccc;
  text-align: center;
  font:14px/28px '微软雅黑';
  color:#999;
}
.table2 tr td .plus{
  float: left;
}
.table2 tr td a{
  cursor:pointer;
  color:#666;
  font-weight: normal;
}

</style>
